import { ref } from 'vue'
import type { Activity } from '@/api'

export function useActivityList() {
  const list = ref<Activity[]>([])
  const loading = ref(false)
  const finished = ref(false)
  const refreshing = ref(false)
  const initialLoading = ref(true)
  const activeTab = ref('recommend')
  const currentPage = ref(1)
  const pageSize = 10

  const generateMockData = (page: number) => {
    return Array(pageSize).fill(null).map((_, index) => ({
      id: (page - 1) * pageSize + index,
      title: `Activity ${(page - 1) * pageSize + index}`,
      cover: `https://picsum.photos/300/400?random=${(page - 1) * pageSize + index}`,
      description: `This is activity ${(page - 1) * pageSize + index}`,
      startTime: new Date().toISOString(),
      endTime: new Date(Date.now() + 86400000).toISOString(),
      location: 'Mock Location',
      status: 'upcoming'
    }))
  }

  const fetchData = async () => {
    if (loading.value) return

    loading.value = true
    try {
      // 模拟网络延迟
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      const mockData = generateMockData(currentPage.value)
      list.value = [...list.value, ...mockData]
      
      // 模拟数据上限为5页
      if (currentPage.value >= 5) {
        finished.value = true
      } else {
        currentPage.value += 1
      }
    } catch (error) {
      console.error('Failed to fetch activities:', error)
    } finally {
      loading.value = false
      initialLoading.value = false
    }
  }

  const onRefresh = async () => {
    finished.value = false
    list.value = []
    currentPage.value = 1
    await fetchData()
    refreshing.value = false
  }

  const handleTabChange = async (tab: string) => {
    activeTab.value = tab
    finished.value = false
    list.value = []
    currentPage.value = 1
    initialLoading.value = true
    await fetchData()
  }

  return {
    list,
    loading,
    finished,
    refreshing,
    initialLoading,
    activeTab,
    fetchData,
    onRefresh,
    handleTabChange
  }
}

